<template>
	<view
		:style="'order:'+Item.order+';'+Item.css"
		class="list-public">
		<template v-if="listState == 'success'">
			<view
				@click="$_To('post/post?pid='+item.pid)"
				class="for"
				v-for="item in list">
				<!-- 块.1 - 用户展示 -->
				<view
					class="user Flex"
					@click.stop="$_To('user/user?uid=' + item.author.uid)">
					<view class="left">
						<view class="avatar">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
						<view
							:style="item.author.nicknameColor?'background:'+item.author.nicknameColor+';':'background: #C0C4CC;'"
							class="right-bottom">{{item.author.roleName?item.author.roleName[0]:'匿'}}</view>
					</view>
					<view class="center">
						<view class="center-top">
							<view class="nickname H2">{{item.author.nickname?item.author.nickname:'匿名'}}</view>
						</view>
						<view class="center-bottom Flex">
							<text class="P" :style="item.author.nicknameColor?'color:'+item.author.nicknameColor+';':''">{{item.author.roleName?item.author.roleName:'匿名'}}</text>
							<template v-if="item.author.gender != 1">
								<text
									:style="item.author.gender==3?'color: #ff00ff;':'color: #409EFF;'"
									:class="item.author.gender==3?'iconfont icon-nv':'iconfont icon-nan'"></text>
							</template>
							<text class="P">{{item.createdTimeAgo}}</text>
						</view>
					</view>
					<view class="right Flex">
						<view class="button Flex">
							<text class="P">查看用户</text>
						</view>
					</view>
				</view>
				<view
					class="title"
					v-if="item.title">{{item.title}}</view>
				<!-- 文字摘要 -->
				<view class="content H2 three">
					<template v-if="item.operations.diversifyImages.length">
						<template v-for="title in item.operations.diversifyImages">
							<template v-if="title.code == 'title'">
								<text
									:style="title.description+'padding:0 10rpx 0 0;'">
									{{title.name}}</text>
							</template>
						</template>
					</template>
					{{$_filterHtml(item.content)}}
				</view>
				<!-- 图片列表 -->
				<template v-if="item.files.images.length">
					<!-- 1张图片 -->
					<template v-if="item.files.images.length == 1">
						<view
							class="file-image-list-1"
							@click.stop="$_picturePreview(index_1,item.files.images)"
							v-for="(images,index_1) in item.files.images">
							<image
								:src="images.imageRatioUrl"
								mode="widthFix"></image>
						</view>
					</template>
					<!-- 2张图片 -->
					<template v-if="item.files.images.length == 2">
						<view class="file-image-list-2">
							<view
								@click.stop="$_picturePreview(index_2,item.files.images)"
								v-for="(images,index_2) in item.files.images">
								<public-lazy-load-image
									:src="images.imageRatioUrl"
									width="100%"
									height="200rpx"
									borderRadius="0">
								</public-lazy-load-image>
							</view>
						</view>
					</template>
					<!-- 3张图片 -->
					<template v-if="item.files.images.length == 3">
						<view class="file-image-list-3">
							<view
								@click.stop="$_picturePreview(0,item.files.images)"
								class="__left">
								<public-lazy-load-image
									:src="item.files.images[0].imageRatioUrl"
									width="100%"
									height="270rpx"
									borderRadius="0">
								</public-lazy-load-image>
							</view>
							<view class="__right">
								<view @click.stop="$_picturePreview(1,item.files.images)">
									<public-lazy-load-image
										:src="item.files.images[1].imageRatioUrl"
										width="100%"
										height="130rpx"
										borderRadius="0">
									</public-lazy-load-image>
								</view>
								<view @click.stop="$_picturePreview(2,item.files.images)">
									<public-lazy-load-image
										:src="item.files.images[2].imageRatioUrl"
										width="100%"
										height="130rpx"
										borderRadius="0">
									</public-lazy-load-image>
								</view>
							</view>
						</view>
					</template>
					<!-- 4张图片 -->
					<template v-if="item.files.images.length == 4">
						<view class="file-image-list-4">
							<view
								@click.stop="$_picturePreview(index_4,item.files.images)"
								v-for="(images,index_4) in item.files.images">
								<public-lazy-load-image
									:src="images.imageRatioUrl"
									width="100%"
									height="180rpx"
									borderRadius="0">
								</public-lazy-load-image>
							</view>
						</view>
					</template>
					<!-- 大于4张图片 -->
					<template  v-if="item.files.images.length > 4">
						<view class="image">
							<view
								class="image-for"
								@click.stop="$_picturePreview(index_more,item.files.images)"
								v-for="(images,index_more) in item.files.images">
								<public-lazy-load-image
									:src="images.imageRatioUrl"
									width="228.5rpx"
									height="130rpx"
									borderRadius="0">
								</public-lazy-load-image>
							</view>
						</view>
					</template>
				</template>
				<!-- 视频列表 -->
				<view class="video" v-if="!item.files.images.length && item.files.videos.length">
					<view class="picture-cover">
						<image :src="item.files.videos[0].videoPosterUrl" mode="widthFix"></image>
					</view>
					<text class="Flex iconfont icon-play"></text>
				</view>
				<!-- 评论列表 -->
				<view
					class="comment Flex"
					v-if="item.previewComments">
					<view class="_avatar">
						<image :src="item.previewComments[0].author.avatar" mode="widthFix"></image>
					</view>
					<view class="_nickname">{{item.previewComments[0].author.nickname}}:</view>
					<view class="_content one">
						<text class="iconfont icon-yuyin" v-if="item.previewComments[0].files.audios.length"></text>{{$_filterHtml(item.previewComments[0].content)}}
					</view>
				</view>
				<!-- 点赞列表 -->
				<view
					class="like-list"
					v-if="item.previewLikeUsers && item.previewLikeUsers.length">
					<view class="like-list-left">
						<view class="_for" v-for="like in item.previewLikeUsers">
							<image :src="like.avatar" mode="widthFix"></image>
						</view>
						<text>{{item.likeCount}}赞</text>
					</view>
				</view>
				<view class="group-for-type">
					<view class="_group-box" v-if="item.group || item.hashtags">
						<view class="_group" v-if="item.group">
							<view v-if="item.group.cover"><image :src="item.group.cover" mode="widthFix"></image></view>
							<text>{{item.group.gname}}</text>
						</view>
						<view
							class="_hashtag"
							v-if="item.hashtags">
							#{{item.hashtags[0].hname}}#</view>
					</view>
					<view class="type Flex" v-if="item.files.images.length||item.files.videos.length||item.files.audios.length">
						<text class="Bj-LanSe iconfont icon-tupian" v-if="item.files.images.length"></text>
						<text class="Bj-HongSe iconfont icon-zhibo" v-if="item.files.videos.length"></text>
						<text class="Bj-LvSe iconfont icon-yuyin" v-if="item.files.audios.length"></text>
					</view>
				</view>
				<!-- 尾部图标 -->
				<view class="_iconfont Flex">
					<view class="Flex" @click.stop="clickComment(item)">
						<text
							class="iconfont icon-comment"
							:style="item.commentButton?'color: #409EFF;':''"></text>
						<text
							class="Zi"
							:style="item.commentButton?'color: #409EFF;':''">{{item.commentCount}}</text>
					</view>
					<view class="Flex" @click.stop="clickLike(item)">
						<text
							class="iconfont icon-good"
							:style="item.interaction.likeStatus?'color: #409EFF;':''"></text>
						<text
							class="Zi"
							:style="item.interaction.likeStatus?'color: #409EFF;':''">{{item.likeCount}}</text>
					</view>
					<view class="Flex" @click.stop="clickFollow(item)">
						<text
							class="iconfont icon-favorite"
							:style="item.interaction.followStatus?'color: #409EFF;':''"></text>
						<text
							class="Zi"
							:style="item.interaction.followStatus?'color: #409EFF;':''">{{item.followCount}}</text>
					</view>
				</view>
				<!-- 评论框子 -->
				<view class="box-comment" v-if="item.commentButton">
					<textarea @click.stop
						maxlength="-1"
						auto-height="true"
						v-model="vModelCommentContent"
						placeholder="赶紧,说点什么..."
						placeholder-style="color:#C0C4CC;"></textarea>
					<view @click.stop="clickQuickComments(item)">快速评论</view>
				</view>
			</view>
			<view
				v-if="Item.page"
				@click="getList('more')"
				class="more">{{listPageText}}</view>
		</template>
		<template v-if="listState == 'loading'">
			<view class="skeleton-screen" v-for="item in Item.query.pageSize?Item.query.pageSize:1">
				<view class="_top">
					<view class="loading-css"></view>
					<view class="loading-css"></view>
				</view>
				<view class="_center loading-css"></view>
				<view class="_bottom">
					<view class="loading-css"></view>
					<view class="loading-css"></view>
					<view class="loading-css"></view>
				</view>
			</view>
		</template>
		<template v-if="listState == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-public",
		props:{
			Item:{
				type:Object,
				default:null
			},
			YrConfig:{
				type:String,
				default:""
			},
			listGid:{
				type:String,
				default:""
			},
			listHid:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				list:[],
				listState:"loading",
				listPage:2,
				listPageText:"点击加载更多",
				vModelCommentContent:""
			};
		},
		mounted(){
			this.getList();
		},
		// 卸载组件
		destroyed(){
			
		},
		methods: {
			getList(more){
				if(this.Item.query.gid == 'empty'){
					this.Item.query.gid = "";
					this.listGid = ""
				}
				if(this.Item.query.hid == 'empty'){
					this.Item.query.hid = "";
					this.listHid = ""
				}
				if(more == 'more'){
					this.listPageText = "加载中..."
				}
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"mapId": this.Item.query.mapId,
						"mapLng": this.Item.query.mapLng,
						"mapLat": this.Item.query.mapLat,
						"uidOrUsername": this.Item.query.uidOrUsername,
						"hid": this.Item.query.hid?this.Item.query.hid:this.listHid,
						"gid": this.Item.query.gid?this.Item.query.gid:this.listGid,
						"includeSubgroups": this.Item.query.includeSubgroups,
						"allDigest": this.Item.query.allDigest,
						"digestState": this.Item.query.digestState,
						"stickyState": this.Item.query.stickyState,
						"contentType": this.Item.query.contentType,
						"createdDays": this.Item.query.createdDays,
						"createdDate": this.Item.query.createdDate,
						"createdDateGt": this.Item.query.createdDateGt,
						"createdDateLt": this.Item.query.createdDateLt,
						"likeCountGt": this.Item.query.likeCountGt,
						"likeCountLt": this.Item.query.likeCountLt,
						"followCountGt": this.Item.query.followCountGt,
						"followCountLt": this.Item.query.followCountLt,
						"blockCountGt": this.Item.query.blockCountGt,
						"blockCountLt": this.Item.query.blockCountLt,
						"commentCountGt": this.Item.query.commentCountGt,
						"commentCountLt": this.Item.query.commentCountLt,
						"orderType": this.Item.query.orderType,
						"orderDirection": this.Item.query.orderDirection,
						"blockGroups": this.Item.query.blockGroups + this.YrConfig,
						"blockHashtags": this.Item.query.blockHashtags,
						"pluginRatingId": this.Item.query.pluginRatingId,
						"pageSize": this.Item.query.pageSize,
						"page":more == 'more' ? this.listPage : "",
						"whitelistKeys":"pid,author.uid,author.avatar,author.gender,author.nicknameColor,author.roleName,author.nickname,createdTimeAgo,title,content,commentCount,likeCount,followCount,files,previewComments.0.author.avatar,previewComments.0.author.nickname,previewComments.0.files.audios,previewComments.0.content,operations,group.cover,group.gname,hashtags.0.hname,readConfig,moreJson,interaction,previewLikeUsers.0.avatar,previewLikeUsers.1.avatar,previewLikeUsers.2.avatar,previewLikeUsers.3.avatar,previewLikeUsers.4.avatar,previewLikeUsers.5.avatar,previewLikeUsers.6.avatar,previewLikeUsers.7.avatar,previewLikeUsers.8.avatar,previewLikeUsers.9.avatar,previewLikeUsers.10.avatar"
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.list = this.list.concat(res.data.data.list);
								this.listPage++
								this.listPageText = "点击加载更多"
							}else{
								this.listPageText = "没有数据啦"
							}
							this.$store.commit('mutationsStateonReachBottomStatus',true)
						}else{
							if(res.data.data.list.length){
								this.list = res.data.data.list;
								this.listState = "success"
							}else{
								this.listState = "empty"
							}
						}
					}
				)
			},
			// 点赞事件
			clickLike(item){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":"like",
						"markType":"post",
						"fsid":item.pid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							if(item.interaction.likeStatus){
								this.$set(item.interaction,'likeStatus',false)
								this.$set(item,'likeCount',item.likeCount -1)
							}else{
								this.$set(item.interaction,'likeStatus',true)
								this.$set(item,'likeCount',item.likeCount +1)
							}
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 收藏事件
			clickFollow(item){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":"follow",
						"markType":"post",
						"fsid":item.pid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							if(item.interaction.followStatus){
								this.$set(item.interaction,'followStatus',false)
								this.$set(item,'followCount',item.followCount -1)
							}else{
								this.$set(item.interaction,'followStatus',true)
								this.$set(item,'followCount',item.followCount +1)
							}
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 点击评论按钮
			clickComment(item){
				this.$set(item, 'commentButton', item.commentButton ? false : true);
			},
			// 点击快速发布
			clickQuickComments(item){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/editor/comment/quick-publish",
					{
						"commentPid":item.pid,
						"content":this.vModelCommentContent
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.$set(item, 'commentButton',false);
							this.$set(item, 'commentCount',item.commentCount+1);
							this.vModelCommentContent = "";
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
							this.$set(item, 'commentButton',false);
							this.vModelCommentContent = "";
						}
					}
				)
			},
		},
	}
</script>

<style lang="scss" scoped>
.list-public{
	.for{
		padding: 25rpx;
		border-bottom: 25rpx solid $BeiJingSe;
		.title{
			font-weight: bold;
			margin-top: 25rpx;
		}
		.content{
			word-break: break-all;
			margin-top: 20rpx;
		}
		.image{
			display: flex;
			flex-wrap: wrap;
			margin-top: 15rpx;
			width: 700rpx;
			.image-for{
				width: 228.5rpx;
				height: 130rpx;
				overflow: hidden;
				border-radius: 5rpx;
				margin-top: 10rpx;
				background: $BeiJingSe;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
			}
			.image-for:nth-child(2),.image-for:nth-child(5),.image-for:nth-child(8){
				margin: 10rpx 10rpx 0 10rpx;
			}
			// #ifdef MP-WEIXIN
			.image-for{
				margin-top: 8rpx;
			}
			.image-for:nth-child(2),.image-for:nth-child(5),.image-for:nth-child(8){
				margin: 8rpx 8rpx 0 8rpx;
			}
			// #endif
		}
		.file-image-list-1{
			margin-top: 10rpx;
			width: 50%;
			image{
				max-width: 100%;
				height: auto;
				border-radius: 10rpx;
				display: block;
			}
		}
		.file-image-list-2{
			margin-top: 10rpx;
			width: 100%;
			display: flex;
			justify-content:space-between;
			overflow: hidden;
			border-radius: 10rpx;
			view{
				width:calc(50% - 5rpx);
				overflow: hidden;
			}
		}
		.file-image-list-3{
			margin-top: 10rpx;
			width: 100%;
			display: flex;
			overflow: hidden;
			border-radius: 10rpx;
			.__left{
				flex: 1;
				height: 270rpx;
				background: $BeiJingSe;
				flex-shrink: 0;
				margin-right: 10rpx;
			}
			.__right{
				flex-shrink: 0;
				display: flex;
				justify-content:space-between;
				flex-flow: column;
				view{
					width: 230rpx;
					height: 130rpx;
					background: $BeiJingSe;
				}
			}
		}
		.file-image-list-4{
			margin-top: 10rpx;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content:space-between;
			overflow: hidden;
			border-radius: 10rpx;
			view{
				width:calc(50% - 5rpx);
				height: 180rpx;
				background: $BeiJingSe;
			}
			view:nth-child(3),view:nth-child(4){
				margin-top: 10rpx;
			}
		}
		.video{
			margin-top: 25rpx;
			width: 100%;
			height: 300rpx;
			overflow: hidden;
			border-radius: 10rpx;
			position: relative;
			.picture-cover{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 300rpx;
				overflow: hidden;
			}
			.icon-play{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 300rpx;
				align-items: center;
				justify-content: center;
				color: #FFF;
				text-shadow: 0 0 1rpx #000;
				font-size: 100rpx;
				line-height: 100rpx;
				background-color:rgba(0,0,0,0.5);
			}
		}
		
		.comment{
			align-items: center;
			background: $BeiJingSe;
			margin-top: 25rpx;
			padding:20rpx;
			border-radius: 100rpx;
			._avatar{
				width: 50rpx;
				height: 50rpx;
				border-radius: 100rpx;
				overflow: hidden;
			}
			._nickname{
				line-height: 32rpx;
				flex-shrink: 0;
				color: $LanSe;
				margin: 0 15rpx;
			}
			._content{
				line-height: 32rpx;
				flex: 1;
				color: $FuZhuSe;
				.icon-yuyin{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $LvSe;
					padding-right: 5rpx;
				}
			}
		}
		.group-for-type{
			display: flex;
			justify-content:space-between;
			margin-top: 25rpx;
			._group-box{
				display: flex;
				._group{
					display: flex;
					align-items: center;
					background: $BeiJingSe;
					border-radius: 100rpx;
					margin-right: 20rpx;
					view{
						width: 45rpx;
						height: 45rpx;
						overflow: hidden;
						border-radius: 100%;
					}
					text{
						font-size: 22rpx;
						line-height: 22rpx;
						padding: 0 20rpx 0 15rpx;
					}
				}
				._hashtag{
					display: flex;
					align-items: center;
					border-radius: 100rpx;
					height: 45rpx;
					background: $BeiJingSe;
					font-size: 22rpx;
					line-height: 22rpx;
					padding: 0 15rpx;
					margin-right: 20rpx;
				}
			}
			.type{
				align-items: center;
				justify-content: flex-end;
				height: 45rpx;
				text{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 45rpx;
					height: 45rpx;
					margin-left: 10rpx;
					color: #FFF;
					font-size: 28rpx;
					line-height: 28rpx;
					border-radius: 5rpx;
				}
			}
		}
		.like-list{
			display: flex;
			align-items: center;
			margin-top: 25rpx;
			.like-list-left{
				flex: 1;
				height: 60rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				._for{
					width: 60rpx;
					height: 60rpx;
					border: 1rpx solid #FFF;
					border-radius: 100%;
					overflow: hidden;
					margin-left: -15rpx;
					position: relative;
					background: $BeiJingSe;
				}
				._for:nth-child(1){
					z-index: 1;
					margin-left: 0;
				}
				._for:nth-child(2){z-index: 2;}
				._for:nth-child(3){z-index: 3;}
				._for:nth-child(4){z-index: 4;}
				._for:nth-child(5){z-index: 5;}
				._for:nth-child(6){z-index: 6;}
				._for:nth-child(7){z-index: 7;}
				._for:nth-child(8){z-index: 8;}
				._for:nth-child(9){z-index: 9;}
				._for:nth-child(10){z-index: 10;}
				._for:nth-child(11){z-index: 11;}
				text{
					display: flex;
					align-items: center;
					height: 60rpx;
					line-height: 28rpx;
					font-size: 28rpx;
					color: $ZhanWeiSe;
					margin-left: 15rpx;
				}
			}
		}
		._iconfont{
			justify-content:space-between;
			border-top: 1rpx solid $BeiJingSe;
			margin-top: 25rpx;
			padding-top: 25rpx;
			view{
				align-items: center;
				.iconfont{
					font-size: 40rpx;
					line-height: 40rpx;
					padding-right: 15rpx;
				}
				.Zi{
					font-size: 32rpx;
					line-height: 32rpx;
				}
			}
		}
		.box-comment{
			display: flex;
			margin-top: 25rpx;
			textarea{
				flex: 1;
				background: $BeiJingSe;
				min-height: 50rpx;
				font-size: 28rpx;
				line-height: 30rpx;
				border-radius: 5rpx;
				padding: 15rpx;
			}
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				height: 80rpx;
				background: $LanSe;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 5rpx;
				color: #FFF;
				padding: 0 20rpx;
				margin-left: 15rpx;
			}
		}
	}
	.user{
		.left{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			position: relative;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background: $BeiJingSe;
			}
			.right-bottom{
				width: 30rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 2;
				border: 1px solid #FFF;
				color: #FFF;
				font-size: 18rpx;
				line-height: 18rpx;
				border-radius: 100rpx;
			}
		}
		.center{
			flex: 1;
			height: 80rpx;
			overflow: hidden;
			margin: 0 20rpx;
			.center-top{
				align-items: center;
				padding-top: 5rpx;
				.nickname{
					line-height: 32rpx;
				}
				.P{
					padding-left: 15rpx;
				}
			}
			.center-bottom{
				margin-top: 15rpx;
				text{
					line-height: 22rpx;
					padding-right: 15rpx;
				}
				.iconfont{
					font-size: 22rpx;
					color: $ZhanWeiSe;
					margin-left: -15rpx;
				}
			}
		}
		.right{
			height: 80rpx;
			align-items: center;
			.button{
				align-items: center;
				border: 1rpx solid $JuHuang;
				border-radius: 100rpx;
				height: 50rpx;
				padding: 0 20rpx;
				text{
					color: $JuHuang;
					line-height: 22rpx;
				}
				.iconfont{
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}
		}
	}
	.three{
		display: -webkit-box;
		/*!autoprefixer:off*/
		-webkit-box-orient: vertical;
		/*autoprefixer:on*/
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.one{
		display: -webkit-box;
		/*!autoprefixer:off*/
		-webkit-box-orient: vertical;
		/*autoprefixer:on*/
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $ZhanWeiSe;
		padding: 35rpx 0;
	}
}
.skeleton-screen{
	padding: 25rpx;
	border-bottom: 25rpx solid $BeiJingSe;
	._top{
		width: 100%;
		height: 80rpx;
		display: flex;
		view:nth-child(1){
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
		}
		view:nth-child(2){
			flex: 1;
			height: 80rpx;
			margin-left: 25rpx;
		}
	}
	._center{
		width: 100%;
		height: 160rpx;
		margin-top: 25rpx;
	}
	._bottom{
		display: flex;
		align-items: center;
		height: 80rpx;
		justify-content:space-between;
		margin-top: 25rpx;
		view{
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
		}
	}
}
</style>